<template>
  <div id="app">
    <Header notab="job"/>
    <div class="contentWeb">
      <div class="joinSearch clear">
        <div class="searchsele">
          <el-cascader :loading="hangyeLoading" popper-class="popSelect" :options="hangyelist" @change="getfindWorkList(1)" placeholder="所属行业" v-model="search.industry"
            :show-all-levels="false" :props="{value: 'name', label: 'name', children: 'contentSet'}"></el-cascader>
        </div>
        <div class="searchsele">
          <el-select style="width:140px" popper-class="popSelect" v-model="search.wageRange" @change="getfindWorkList(1)" :loading="WageRangeloading" placeholder="月薪范围">
            <el-option label="不限" value=""></el-option>
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                       v-for="(item, index) in WageRangeList"></el-option>

          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width:180px" popper-class="popSelect" v-model="search.experience" @change="getfindWorkList(1)" :loading="nianxianloading" placeholder="工作年限">
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName == '不限'? '': item.subTypeName"
                       v-for="(item, index) in NianxianList"></el-option>

          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width:160px" popper-class="popSelect" v-model="search.enterpriseNature" @change="getfindWorkList(1)" :loading="xingzhiloading" placeholder="公司性质">
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName == '不限'? '': item.subTypeName"
                       v-for="(item, index) in xingzhiList"></el-option>

          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width:160px" popper-class="popSelect" v-model="search.companySize" @change="getfindWorkList(1)" :loading="guimoloading"
                     placeholder="公司规模">
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName == '不限'? '': item.subTypeName"
                       v-for="(item, index) in guimoList"></el-option>

          </el-select>
        </div>
      </div>
      <div class="listcount">共有<span>{{total}}个</span>符合条件的职位</div>
      <div class="jobcontent clear">
        <div class="jobLeft">
          <div class="jobtab" v-for="(item, index) in ListList" :key="index">
            <div v-if="item.id > 0">
              <div @click="todetail(item.id)" style="cursor: pointer;">
                <div class="clear">
                  <div class="zwname">{{item.positionName}}</div>
                  <div class="fbsj">发布于 {{item.updateTime}}</div>
                </div>
                <div class="jieshao">
                  <b>{{item.wageRange}}</b>
                  <span>{{item.saveCity}}</span>
                  <span>{{item.experience}}经验</span>
                  <span>{{item.educational}}</span>
                  <span>招{{item.zprs}}人</span>
                </div>
                <div class="clear" v-html="welfareRemarkhtml(item.welfareRemark)">
                </div>
              </div>
            </div>
            <div class="gsjj clear" @click="tocompany(item.enterpriseUid)">
              <img :src="item.logo"/><b>{{item.companyName}}</b> <span
              v-if="item.industry" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 160px;">{{item.industry}}</span><span
              v-if="item.enterpriseNature" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 66px;">{{item.enterpriseNature}}</span>
              <span v-if="item.companySize" style="overflow: hidden;
     white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;">{{item.companySize}}</span>
            </div>
            <div class="btnstyle">
              <div class="soucang" v-if="item.isCollection == 2">
                <div class="tnm"  @click="myCollection(item,index)">收藏</div>
              </div>
              <div class="soucang" style="background: #F6F6F8;border: 1px solid #F6F6F8;color:#ddd;" v-else>
                <div class="tnm">已收藏</div>
              </div>
              <div class="btnshenqing" style="background: #F6F6F8;border: 1px solid #F6F6F8; color:#ddd;" v-if="item.isApply == 1">已申请职位</div>
              <div class="btnshenqing" @click="shenqing(item,index)" v-else>申请职位</div>
            </div>
          </div>
          <Noview v-if="total == 0"/>
          <div style="text-align: center" v-if="total > 0">
            <el-pagination background
              layout="prev, pager, next"
              :page-size="search.pageSize"
              :current-page="search.pageNum"
              @current-change="getfindWorkList"
              :total="total"></el-pagination>
          </div>
        </div>
        <div class="jobRight">
          <img :src="img.picurl" v-for="(img, index) in rightImages" :key="index">
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import mt from '../../assets/img/mt.png'
// import hblad from '../../assets/img/hblad.png'
// import ad from '../../assets/img/ad.jpg'
// import zpad from '../../assets/img/zpad.png'
import {
  findWorkList,
  addToMyCollection,
  applyPositionMy,
  EnterpriseNature,
  EnterpriseSize,
  OccupationType,
  WageRangeState,
  GetQueryString,
  WorkYearState,
  cancleMyCollection,
  CommonPicList
} from '../../assets/js/domains'
import Noview from '../../components/noview'
export default {
  name: 'Job',
  components: { Header, Footer, Noview },
  directives: {},
  data: function () {
    return {
      WageRangeList: [],
      NianxianList: [],
      xingzhiloading: true,
      nianxianloading: true,
      WageRangeloading: true,
      guimoloading: true,
      hangyeLoading: true,
      xingzhiList: [],
      hangyelist: [],
      guimoList: [],
      info: {},
      total: 0,
      count: 0,
      search: { pageNum: 1, pageSize: 20, industry: '', enterpriseNature: '', companySize: '', wageRange: '', positionName: '' },
      ListList: [],
      options: [],
      mt: mt,
      rightImages: [
        // {picurl: ad}, {picurl: zpad},{picurl: hblad}
      ]
    }
  },
  created: function () {
    document.title = '找工作'
    if (GetQueryString('title')) {
      this.search.positionName = decodeURI(GetQueryString('title'))
    }
    if (GetQueryString('industry')) {
      this.search.industry = decodeURI(GetQueryString('industry'))
    }
    this.getCommonPicList()
  },
  computed: {},
  mounted: function () {
    this.getOccupationType()
    this.getEnterpriseNature()
    this.getEnterpriseSize()
    this.getWageRangeState()
    this.getWorkYearState()
    this.getfindWorkList()
  },
  methods: {
    getWageRangeState: function () {
      const _this = this
      WageRangeState().then(function (res) {
        _this.WageRangeloading = false
        if (res.code === 200) {
          _this.WageRangeList = res.data
        }
      })
    },
    getWorkYearState: function () {
      const _this = this
      WorkYearState().then(function (res) {
        if (res.code === 200) {
          _this.nianxianloading = false
          _this.NianxianList = res.data
        }
      })
    },
    welfareRemarkhtml: function (item) {
      if (item) {
        const mp = item.split(',')
        let htmls = ''
        for (let i = 0; i < mp.length; i++) {
          htmls = htmls + ' <div style="height: 36px;line-height: 34px;background: #f6f6f8;border: 1px solid #f6f6f8;border-radius: 6px;padding: 0 15px;font-size: 16px;float: left;margin-right: 10px;margin-top: 5px;">' + mp[i] + '</div>'
        }

        return htmls
      } else {
        return ''
      }
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          _this.hangyelist = [{ name: '不限' }, ...res.data]
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getEnterpriseNature: function () {
      const _this = this
      EnterpriseNature().then(function (res) {
        _this.xingzhiloading = false
        if (res.code === 200) {
          _this.xingzhiList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getCommonPicList: function () {
      const _this = this
      CommonPicList({ pic_type: 'a_right' }).then(function (res) {
        if (res.code === 200) {
          _this.rightImages = res.data
        }
      })
    },
    getEnterpriseSize: function () {
      const _this = this
      EnterpriseSize().then(function (res) {
        _this.guimoloading = false
        if (res.code === 200) {
          _this.guimoList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getfindWorkList: function (page) {
      if (page) {
        this.search.pageNum = page
      }
      const _this = this
      const param = Object.assign({}, _this.search)
      param.userUid = param.userUid === localStorage.getItem('md_user_uid') ? localStorage.getItem('md_user_uid') : ''
      if (Array.isArray(param.industry)) {
        param.industry = param.industry[param.industry.length - 1] === '不限' ? '' : param.industry[param.industry.length - 1]
      }
      // param.industry = param.industry === Array.isArray(param.industry) ? param.industry[param.industry.length - 1] : param.industry
      // param.industry = param.industry === param.industry.trim() === '不限' ? '' : param.industry
      findWorkList(param).then(function (res) {
        if (res.code === 200) {
          if (res.data.totalPages === 1) {
            _this.ListList = res.data.content.filter(item => item.id !== 0)
            _this.total = _this.ListList.length
          } else {
            _this.ListList = res.data.content
            _this.total = res.data.totalElements
          }
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    todetail: function (id) {
      window.location.href = 'jobDetail.html?id=' + id
    },
    shenqing (item, key) {
      const _this = this
      const _key1 = key
      if (!_this.curUserInfo.userUid) {
        _this.$message.warning('请先登录！')
        return
      }
      if (!_this.curUserInfo.approval || Number(_this.curUserInfo.approval) !== 2) {
        _this.$message.warning('用户未通过审核，不能申请职位')
        return
      }
      if (Number(_this.curUserInfo.jlzt) !== 1) {
        _this.$message.warning('简历异常，请完善简历')
        return
      }
      applyPositionMy({
        positionId: item.id,
        applyState: 5,
        laiYuan: '电脑端',
        userUid: _this.curUserInfo.userUid,
        enterpriseUid: item.enterpriseUid
      }).then(function (res) {
        if (res.code === 200) {
          _this.ListList[_key1].isApply = 1
          _this.$message({
            message: '申请成功',
            type: 'success'
          })
        } else {
          _this.$message.error('申请失败')
        }
      })
    },
    tocompany: function (id) {
      window.location.href = '/companyDetail.html?enterpriseUid=' + id
    },
    // 添加收藏
    myCollection: function (item, key) {
      const userUid = localStorage.getItem('md_user_uid')
      if (!userUid) {
        this.$message.warning('请先登录！')
        return
      }
      const _this = this
      const _key = key
      addToMyCollection({
        isCollection: 1,
        enterpriseUid: item.enterpriseUid,
        positionId: item.id,
        userUid: userUid
      }).then(function (res) {
        if (res.code === 200) {
          _this.ListList[_key].isCollection = 1
          _this.$message.success('收藏成功')
        } else {
          _this.$message.error('收藏失败')
        }
      })
    },
    // 取消收藏
    myCencelCollection: function (item, key) {
      const userUid = localStorage.getItem('md_user_uid')
      const _this = this
      const _key = key
      cancleMyCollection({
        isCollection: 1,
        enterpriseUid: item.enterpriseUid,
        positionId: item.id,
        userUid: userUid
      }).then(function (res) {
        if (res.code === 200) {
          _this.ListList[_key].isCollection = 2
          _this.$message.success('取消收藏成功')
        } else {
          _this.$message.error('取消收藏失败')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/job";
</style>
<style lang="less">
.searchsele {
  margin-right: 0 !important;
  width: 230px;
  .el-select .el-input__inner,.el-cascader .el-input__inner{border:none; color: #1e1e1e;font-size: 20px;}
  // .el-input__suffix{left: 0;}

  .el-cascader input::-webkit-input-placeholder { color:#1e1e1e;}
  .el-cascader :-moz-placeholder { color:#1e1e1e;}
  .el-cascader ::-moz-placeholder { color:#1e1e1e;}
  .el-cascader input:-ms-input-placeholder { color:#1e1e1e;}
  .el-cascader input::-ms-input-placeholder { color:#1e1e1e;}

  .el-select input::-webkit-input-placeholder { color:#1e1e1e;}
  .el-select :-moz-placeholder { color:#1e1e1e;}
  .el-select ::-moz-placeholder { color:#1e1e1e;}
  .el-select input:-ms-input-placeholder { color:#1e1e1e;}
  .el-select input::-ms-input-placeholder { color:#1e1e1e;}

  .el-icon-arrow-up:before,
  .el-icon-arrow-up.is-reverse:before{content:"\e78f"; color:#1e1e1e}
  .el-icon-arrow-down:before,
  .el-icon-arrow-down.is-reverse:before{content:"\e790"; color:#1e1e1e}
}
.popSelect{
  .el-select-dropdown__wrap{max-height: 500px;}
  .el-select-dropdown__item{height: 60px; line-height: 60px;font-size: 18px;color: #1E1E1E;}
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item.selected,
  .el-select-dropdown__item:hover{background-color: #20A2B2; color: #fff;}

  .el-cascader-menu__wrap{height: 500px;}
  .el-cascader-node{height: 60px; line-height: 60px;font-size: 18px;color: #1E1E1E;}
  .el-cascader-node:not(.is-disabled):hover,
  .el-cascader-node.is-active,
  .el-cascader-node.in-active-path{background-color: #20A2B2; color: #fff;}
  .el-icon-arrow-right:before{content: "\e791";}
  .el-cascader-node.is-active .el-icon-check{display: none;}
}

</style>
